<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/logOff' }"
      >备案管理</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!idS">新增</el-breadcrumb-item>
      <el-breadcrumb-item v-if="disabled && idS">详情</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!disabled && idS">申请变更</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item
                label="园所类型"
                prop="institutionType"
                style="width: 24%"
              >
                <el-select
                  v-model="ruleForm.institutionType"
                  style="width: 100%"
                  placeholder="请选择活动区域"
                  disabled
                >
                  <el-option label="托育中心" :value="1" />
                  <el-option label="用人单位托育点" :value="2" />
                  <el-option label="幼儿园" :value="3" />
                  <el-option label="托育综合服务中心" :value="4" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="服务类型"
                prop="serviceType"
                style="width: 24%"
              >
                <el-select
                  v-model="ruleForm.serviceType"
                  style="width: 100%"
                  placeholder="请选择服务类型"
                  disabled
                >
                  <el-option label="全日托" :value="1" />
                  <el-option label="半日托" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="园所性质"
                prop="institutionNature"
                style="width: 24%"
              >
                <el-select
                  v-model="ruleForm.institutionNature"
                  placeholder="请选择园所性质"
                  style="width: 100%"
                  disabled
                >
                  <el-option label="民营" :value="1" />
                  <el-option label="公营" :value="2" />
                  <el-option label="公建民营" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="园所名称"
                prop="institutionName"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.institutionName"
                  placeholder="请输入园所名称"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="成立时间"
                prop="establishDate"
                style="width: 24%"
              >
                <el-date-picker
                  v-model="ruleForm.establishDate"
                  type="date"
                  placeholder="请选择成立时间"
                  style="width: 100%"
                  disabled
                />
                <!-- <el-input
                  v-model="ruleForm.establishDate"
                  placeholder="请输入成立时间"
                ></el-input> -->
              </el-form-item>
              <el-form-item
                label="法人代表"
                prop="legalRepresent"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.legalRepresent"
                  placeholder="请输入法人代表"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="机构负责人"
                prop="manager"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.manager"
                  placeholder="请输入机构负责人"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="联系电话"
                prop="contactPhone"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.contactPhone"
                  placeholder="请输入联系电话"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="托位数"
                prop="childCareCapacity"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.childCareCapacity"
                  placeholder="请输入托位数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="备案托位建设数"
                label-width="140px"
                prop="registeredCapacity"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm.registeredCapacity"
                  placeholder="请选择备案托位建设数"
                  disabled
                  type="number"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">师资信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm1"
              :model="ruleForm1"
              :rules="rules1"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item
                label="教师职工"
                prop="staffCount"
                style="width: 24%"
                type="number"
              >
                <el-input
                  v-model="ruleForm1.staffCount"
                  placeholder="请输入教师职工数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="保育师人数"
                prop="caregiverCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.caregiverCount"
                  placeholder="请输入保育师人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="托育师人数"
                prop="teacherCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.teacherCount"
                  placeholder="请输入托育师人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="育婴员人数"
                prop="nannyCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.nannyCount"
                  placeholder="请输入育婴员人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="幼儿照护人数"
                label-width="120px"
                prop="childNurseCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.childNurseCount"
                  placeholder="请输入幼儿照护人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="幼儿教师人数"
                label-width="120px"
                prop="childTeacherCount"
                style="width: 24%"
                type="number"
              >
                <el-input
                  v-model="ruleForm1.childTeacherCount"
                  placeholder="请输入幼儿教师人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="保安人数"
                prop="securityCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.securityCount"
                  placeholder="请输入保安人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="卫生保健人数"
                label-width="120px"
                prop="healthCareCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.healthCareCount"
                  placeholder="请输入卫生保健人数"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="炊事人数"
                prop="cookCount"
                style="width: 24%"
              >
                <el-input
                  v-model="ruleForm1.cookCount"
                  placeholder="请输入炊事人数"
                  disabled
                  type="number"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">场地信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm2"
              :model="ruleForm2"
              :rules="rules2"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item
                label="园所所在区域"
                prop="position"
                label-width="120px"
                style="width: 24%; position: relative"
              >
                <el-cascader
                  v-if="caseShow || !idS"
                  v-model="ruleForm2.position"
                  :placeholder="dataObj.province ? '' : '请选择地址，支持搜索'"
                  style="width: 100%"
                  :options="positionData"
                  :props="{
                    value: 'label',
                    label: 'label',
                  }"
                  filterable
                  disabled
                />
                <!-- <div style="position: absolute; top: 0; left: 16px">
                  {{ dataObj.province }}/{{ dataObj.city }}/{{
                    dataObj.district
                  }}
                </div> -->
              </el-form-item>
              <el-form-item label="具体位置" prop="address" style="width: 24%">
                <el-input
                  v-model="ruleForm2.address"
                  placeholder="请输入具体位置"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="场地类型"
                prop="locationType"
                style="width: 24%"
              >
                <el-select
                  v-model="ruleForm2.locationType"
                  style="width: 100%"
                  placeholder="请选择园所规模"
                  disabled
                >
                  <el-option label="租赁" value="1" />
                  <el-option label="自有" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="园所规模" prop="scale" style="width: 24%">
                <el-input
                  v-model="ruleForm2.scale"
                  placeholder="请输入园所规模"
                  disabled
                  type="number"
                />
              </el-form-item>
              <el-form-item
                label="食品经营"
                prop="foodManagement"
                style="width: 24%"
              >
                <el-select
                  v-model="ruleForm2.foodManagement"
                  style="width: 100%"
                  placeholder="请选择食品经营"
                  disabled
                >
                  <el-option label="自制餐盒" value="1" />
                  <el-option label="外送餐盒" value="2" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">其他证明文件</div>
      <div
        v-for="(item, index) in fielForList"
        :key="index"
        class="obj_bt_box"
        style="display: flex; margin-top: 30px"
      >
        <div class="box_label" style="width: 150px">
          <span style="color: red; margin-right: 4px">*</span>
          <span>{{ `${item.name}` }}：</span>
          <div v-if="dataObj[item.status] === 0" style="color: red">
            {{ `（不通过）` }}
          </div>
          <div v-if="dataObj[item.status] === 1" style="color: green">
            {{ `（通过）` }}
          </div>
        </div>
        <div class="box_value">
          <el-upload
            style="position: relative; min-height: 148px"
            action="/api/system/upload"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileSumList[item.filelistShowName]"
            :on-success="
              (response, file, fileList) =>
                handleFileSuccess(response, file, fileList, item)
            "
            disabled
            :before-upload="handleBefore"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                style="height: 148px"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span
                class="text"
                style="display: block; max-width: 148px; word-break: break-all"
              >{{ file.name }}</span>
              <span class="el-upload-list__item-actions">
                <span
                  v-if="fileImage !== file.url"
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file, item)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">佐证信息</div>
      <div class="obj_bt_box" style="display: flex; margin-top: 30px">
        <div class="box_label">其他文件：</div>
        <div class="box_value">
          <el-upload
            style="position: relative; min-height: 148px"
            action="/api/system/upload"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileListOtherShow"
            :on-success="handleFileOtherSuccess"
            disabled
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                style="height: 148px"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span
                class="text"
                style="display: block; max-width: 148px; word-break: break-all"
              >{{ file.name }}</span>
              <span class="el-upload-list__item-actions">
                <span
                  v-if="fileImage !== file.url"
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleOhterRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">注销信息</div>
      <div class="obj_bt_box" style="display: flex; margin-top: 30px">
        <span style="color: red; margin-right: 4px">*</span>
        <div class="box_label" style="width: 100px">注销原因：</div>
        <el-input
          v-model="ruleForm.cancelReason"
          type="textarea"
          :placeholder="disabled ? '暂无内容' : '请输入注销原因'"
          :disabled="disabled"
        />
      </div>
      <div v-if="disabled" class="obj_bt_box" style="display: flex; margin-top: 30px">
        <div class="box_label">注销状态：</div>
        <div v-if="dataObj.institutionExamineStatus === 0" class="box_value">
          待审核
        </div>
        <div
          v-if="dataObj.institutionExamineStatus === 1"
          class="box_value"
          style="color: green"
        >
          通过
        </div>
        <div
          v-if="dataObj.institutionExamineStatus === 2"
          class="box_value"
          style="color: red"
        >
          拒绝
        </div>
      </div>
      <div
        v-if="dataObj.institutionExamineStatus === 2"
        class="obj_bt_box"
        style="display: flex; margin-top: 30px"
      >
        <div class="box_label">拒绝原因：</div>
        <div class="box_value">
          <el-input
            v-model="dataObj.reason"
            :disabled="disabled"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="暂无内容"
            style="width: 300px"
          />
        </div>
      </div>
    </div>
    <div
      v-if="!disabled"
      class="cad-box flex-card"
      style="margin: 20px 0; justify-content: space-evenly"
    >
      <el-button type="warning" @click="handleSubmit">确 认</el-button>
    </div>
    <!-- <div v-if="disabled" class="cad-box" style="margin: 20px 0">
      <div class="obj_title">审核信息</div>

      <div
        v-if="dataObj.institutionExamineStatus === 2"
        class="obj_bt_box"
        style="display: flex; margin-top: 30px"
      >
        <div class="box_label">拒绝原因：</div>
        <div class="box_value">
          <el-inputf
            v-model="dataObj.reason"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="暂无内容"
            style="width: 300px"
            disabled
          />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { cancel, getById, getList } from '../recordFiling/api'
import positionData from '@/assets/ssq.js'
import fileImage from '@/assets/file_image.png'
export default {
  data () {
    return {
      positionData,
      fileListOtherShow: [],
      fileListOther: [],
      ruleForm: {
        institutionType: '', // 园所类型
        serviceType: '', // 服务类型
        institutionNature: '', // 园所性质
        institutionName: '', // 机构名称
        establishDate: '', // 成立时间
        childCareCapacity: '', // 托位数
        manager: '', // 负责人姓名
        contactPhone: '', // 联系电话
        registeredCapacity: '', // 备案托位建设数
        legalRepresent: '', // 法人代表
        cancelReason: ''
      },
      ruleForm1: {
        staffCount: '', // 教职工数
        caregiverCount: '', // 保育师人数
        teacherCount: '', // 托育师人数
        nannyCount: '', // 育婴员人数
        childNurseCount: '', // 幼儿护理人数
        childTeacherCount: '', // 幼儿教师人数
        securityCount: '', // 保安人数
        healthCareCount: '', // 卫生保健人数
        cookCount: '' // 炊事人员数
      },
      ruleForm2: {
        position: [], // 地址
        province: '', // 省
        city: '', // 市
        district: '', // 区
        address: '', // 详细地址
        locationType: '', // 场地类型
        scale: '', // 园所规模
        foodManagement: '' // 食品经营
      },
      rules: {
        institutionType: [
          { required: true, message: '请选择园所类型', trigger: 'change' }
        ],
        serviceType: [
          { required: true, message: '请选择服务类型', trigger: 'change' }
        ],
        legalRepresent: [
          { required: true, message: '请输入法人代表', trigger: 'change' }
        ],
        institutionNature: [
          { required: true, message: '请选择园所性质', trigger: 'change' }
        ],
        institutionName: [
          { required: true, message: '请输入园所名称', trigger: 'blur' }
        ],
        establishDate: [
          {
            required: true,
            message: '请选择成立时间',
            trigger: 'change'
          }
        ],
        childCareCapacity: [
          { required: true, message: '请输入托位数', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        registeredCapacity: [
          { required: true, message: '请输入备案托位建设数', trigger: 'blur' }
        ]
      },
      rules1: {
        staffCount: [
          { required: true, message: '请输入教职工数', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value >= 0) {
                callback() // 验证通过
              } else {
                callback(new Error('不能小于0')) // 验证失败
              }
            },
            trigger: 'blur'
          }
        ],
        caregiverCount: [
          { required: true, message: '请输入保育师人数', trigger: 'blur' }
        ],
        teacherCount: [
          { required: true, message: '请输入托育师人数', trigger: 'blur' }
        ],
        nannyCount: [
          { required: true, message: '请输入育婴员人数', trigger: 'blur' }
        ],
        childNurseCount: [
          { required: true, message: '请输入幼儿护理人数', trigger: 'blur' }
        ],
        childTeacherCount: [
          { required: true, message: '请输入幼儿教师人数', trigger: 'blur' }
        ],
        securityCount: [
          { required: true, message: '请输入保安人数', trigger: 'blur' }
        ],
        healthCareCount: [
          { required: true, message: '请输入卫生保健人数', trigger: 'blur' }
        ],
        cookCount: [
          { required: true, message: '请输入炊事人员数', trigger: 'blur' }
        ]
      },
      rules2: {
        foodManagement: [
          { required: true, message: '请选择食品经营', trigger: 'change' }
        ],
        position: [
          { required: true, message: '请选择园区所在区域', trigger: 'change' }
        ],
        locationType: [
          { required: true, message: '请选择场地类型', trigger: 'change' }
        ],
        scale: [{ required: true, message: '请输入园所规模', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ]
      },
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: true,
      fileImage,
      fileSumList: {
        fileList: [],
        fileListShow: [],
        fileList1: [],
        fileListShow1: [],
        fileList2: [],
        fileListShow2: [],
        fileList3: [],
        fileListShow3: [],
        fileList4: [],
        fileListShow4: [],
        fileList5: [],
        fileListShow5: [],
        fileList6: [],
        fileListShow6: [],
        fileList7: [],
        fileListShow7: []
      },
      fromdata: {
        name: '',
        time: '',
        html: ''
      },
      fielForList: [
        {
          name: '工商执照',
          filelistName: 'fileList',
          filelistShowName: 'fileListShow',
          status: 'businessLicenseStatus'
        },
        {
          name: '卫生评价报告',
          filelistName: 'fileList1',
          filelistShowName: 'fileListShow1',
          status: 'healthEvalStatus'
        },
        {
          name: '食品经营许可证',
          filelistName: 'fileList2',
          filelistShowName: 'fileListShow2',
          status: 'foodLicenseStatus'
        },
        {
          name: '园所环境',
          filelistName: 'fileList3',
          filelistShowName: 'fileListShow3',
          status: 'areaUrlStatus'
        },
        {
          name: '场地证明',
          filelistName: 'fileList4',
          filelistShowName: 'fileListShow4',
          status: 'locationProofStatus'
        },
        {
          name: '消防检查合格说明',
          filelistName: 'fileList5',
          filelistShowName: 'fileListShow5',
          status: 'fireSafetyStatus'
        },
        {
          name: '地区备案说明',
          filelistName: 'fileList6',
          filelistShowName: 'fileListShow6',
          status: 'localFilingStatus'
        }
      ],
      caseShow: false,
      dataObj: {}
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  async created () {
    await this.handleGetList()
    const { type } = this.$route.query
    this.disabled = type === 'info'
    // this.idS = id;
    if (this.idS) {
      const res = await getById({
        id: this.idS
      })
      this.dataObj = res
      this.handleEdit()
    }
  },

  mounted () {},
  methods: {
    async handleGetList () {
      const data = await getList({
        areaId: this.curArea.id,
        pageNum: 0,
        pageSize: 100
      })
      this.idS = data[0].id
      console.log(data, 'handleGetList')
    },
    handleFileImage (fileUrl, uid) {
      const fileExtension = fileUrl.url.split('.').pop()
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        return {
          uid: uid,
          name: fileUrl.name,
          url: fileUrl.url,
          uploadFile: fileUrl.url
        }
      } else {
        return {
          uid: uid,
          name: fileUrl.name,
          url: fileImage,
          uploadFile: fileUrl.url
        }
      }
    },
    handleEdit () {
      this.dataObj.businessLicense = JSON.parse(this.dataObj.businessLicense)
      this.dataObj.businessLicense.forEach((item, index) => {
        console.log(index)
        this.fileSumList.fileList.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow.push(
          this.handleFileImage(item, index + 1)
        )
      })

      // this.fileSumList.fileListShow.push({
      //   url: this.dataObj.businessLicense.split(","),
      //   name: "",
      //   uid: 1,
      // });
      this.dataObj.healthEval = JSON.parse(this.dataObj.healthEval)
      this.dataObj.healthEval.forEach((item, index) => {
        this.fileSumList.fileList1.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow1.push(
          this.handleFileImage(item, index + 1)
        )
      })
      this.dataObj.foodLicense = JSON.parse(this.dataObj.foodLicense)
      this.dataObj.foodLicense.forEach((item, index) => {
        this.fileSumList.fileList2.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow2.push(
          this.handleFileImage(item, index + 1)
        )
      })
      this.dataObj.areaUrl = JSON.parse(this.dataObj.areaUrl)
      this.dataObj.areaUrl.forEach((item, index) => {
        this.fileSumList.fileList3.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow3.push(
          this.handleFileImage(item, index + 1)
        )
      })
      this.dataObj.locationProof = JSON.parse(this.dataObj.locationProof)
      this.dataObj.locationProof.forEach((item, index) => {
        this.fileSumList.fileList4.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow4.push(
          this.handleFileImage(item, index + 1)
        )
      })
      this.dataObj.fireSafety = JSON.parse(this.dataObj.fireSafety)
      this.dataObj.fireSafety.forEach((item, index) => {
        this.fileSumList.fileList5.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow5.push(
          this.handleFileImage(item, index + 1)
        )
      })

      this.dataObj.localFiling = JSON.parse(this.dataObj.localFiling)
      this.dataObj.localFiling.forEach((item, index) => {
        this.fileSumList.fileList6.push({
          url: item.url,
          name: item.name,
          uid: index + 1
        })
        this.fileSumList.fileListShow6.push(
          this.handleFileImage(item, index + 1)
        )
      })

      if (this.dataObj.supportingDocument) {
        this.dataObj.supportingDocument = JSON.parse(
          this.dataObj.supportingDocument
        )
        this.dataObj.supportingDocument.forEach((item, index) => {
          this.fileListOther.push({
            url: item.url,
            name: item.name,
            uid: index + 1
          })
          this.fileListOtherShow.push(this.handleFileImage(item, index + 1))
        })
      }

      this.$nextTick(() => {
        this.ruleForm2.position.push(this.dataObj.province)
        this.ruleForm2.position.push(this.dataObj.city)
        this.ruleForm2.position.push(this.dataObj.district)
        this.caseShow = true
      })
      // this.ruleForm2.position[
      //   (this.dataObj.province, this.dataObj.city, this.dataObj.district)
      // ];
      this.ruleForm2.address = this.dataObj.address
      this.ruleForm2.locationType = this.dataObj.locationType
      this.ruleForm2.scale = this.dataObj.scale
      this.ruleForm2.foodManagement = this.dataObj.foodManagement
      this.ruleForm.institutionType = this.dataObj.institutionType
      this.ruleForm.serviceType = this.dataObj.serviceType
      this.ruleForm.institutionNature = this.dataObj.institutionNature
      this.ruleForm.registeredCapacity = this.dataObj.registeredCapacity
      this.ruleForm.institutionName = this.dataObj.institutionName
      this.ruleForm.establishDate = this.dataObj.establishDate
      this.ruleForm.establishDate = this.dataObj.establishDate
      this.ruleForm.childCareCapacity = this.dataObj.childCareCapacity
      this.ruleForm.manager = this.dataObj.manager
      this.ruleForm.contactPhone = this.dataObj.contactPhone
      this.ruleForm.legalRepresent = this.dataObj.legalRepresent
      this.ruleForm1.staffCount = this.dataObj.staffCount
      this.ruleForm1.caregiverCount = this.dataObj.caregiverCount
      this.ruleForm1.teacherCount = this.dataObj.teacherCount
      this.ruleForm1.nannyCount = this.dataObj.nannyCount
      this.ruleForm1.childNurseCount = this.dataObj.childNurseCount
      this.ruleForm1.childTeacherCount = this.dataObj.childTeacherCount
      this.ruleForm1.securityCount = this.dataObj.securityCount
      this.ruleForm1.healthCareCount = this.dataObj.healthCareCount
      this.ruleForm1.cookCount = this.dataObj.cookCount
      this.ruleForm.cancelReason = this.dataObj.cancelReason
    },
    handleFileOtherSuccess (response, file, fileList, item) {
      this.fileListOther.push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileListOtherShow.push({
          uid: file.uid,
          name: response.data.name,
          url: response.data.url,
          uploadFile: response.data.url
        })
      } else {
        this.fileListOtherShow.push({
          uid: file.uid,
          name: response.data.name,
          url: fileImage,
          uploadFile: response.data.url
        })
      }
    },
    handleRemove (file, item) {
      this.fileSumList[item.filelistName] = this.fileSumList[
        item.filelistName
      ].filter((eitem) => eitem.uid !== file.uid)
      console.log(
        this.fileSumList[item.filelistShowName],
        file,
        'handleRemove'
      )
      this.fileSumList[item.filelistShowName] = this.fileSumList[
        item.filelistShowName
      ].filter((eitem) => eitem.uid !== file.uid)
    },
    handleOhterRemove (file) {
      this.fileListOther = this.fileListOther.filter(
        (eitem) => eitem.uid !== file.uid
      )
      console.log(this.fileListOther, 'handleOhterRemove')
      this.fileListOtherShow = this.fileListOtherShow.filter(
        (eitem) => eitem.uid !== file.uid
      )
    },
    handleSubmit () {
      Promise.all([
        this.$refs['ruleForm'].validate(),
        this.$refs['ruleForm1'].validate(),
        this.$refs['ruleForm2'].validate()
      ])
        .then(async () => {
          // 如果所有表单都验证通过
          console.log('所有表单验证通过')
          console.log('提交成功')
          const fileObj = {}
          this.fielForList.forEach((item) => {
            if (item.name === '工商执照') {
              fileObj.businessLicense = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '卫生评价报告') {
              fileObj.healthEval = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '食品经营许可证') {
              fileObj.foodLicense = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '园所环境') {
              fileObj.areaUrl = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '场地证明') {
              fileObj.locationProof = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '消防检查合格说明') {
              fileObj.fireSafety = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
            if (item.name === '地区备案说明') {
              fileObj.localFiling = this.fileSumList[item.filelistName]
                .map((item) => item.url)
                .join(',')
            }
          })
          if (fileObj.businessLicense === '') {
            this.$message.warning('请上传工商执照')
            return false
          }
          if (fileObj.healthEval === '') {
            this.$message.warning('请上传卫生评价报告')
            return false
          }
          if (fileObj.foodLicense === '') {
            this.$message.warning('请上传食品经营许可证')
            return false
          }
          if (fileObj.areaUrl === '') {
            this.$message.warning('请上传园所环境')
            return false
          }
          if (fileObj.locationProof === '') {
            this.$message.warning('请上传场地证明')
            return false
          }
          if (fileObj.fireSafety === '') {
            this.$message.warning('请上传消防检查合格说明')
            return false
          }
          if (fileObj.localFiling === '') {
            this.$message.warning('请上传地区备案说明')
            return false
          }
          if (this.ruleForm.cancelReason === '') {
            this.$message.warning('请输入注销原因')
            return false
          }

          this.ruleForm2.province = this.ruleForm2.position[0]
          this.ruleForm2.city = this.ruleForm2.position[1]
          this.ruleForm2.district = this.ruleForm2.position[2]
          await cancel({
            ...this.ruleForm,
            ...this.ruleForm1,
            ...this.ruleForm2,
            ...fileObj,
            supportingDocument: this.fileListOther
              .map((item) => item.url)
              .join(','),
            areaId: this.curArea.areaId,
            userId: this.user.id,
            id: this.idS
          })
          this.$message.success('审核成功')
          this.$router.push('/logOff')
        })
        .catch((error) => {
          // 如果有任何一个表单验证失败
          console.error('表单验证失败:', error)
        })
    },

    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file)
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList, item) {
      console.log(file, 'handleFileSuccess')
      this.fileSumList[item.filelistName].push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url,
        uploadFile: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileSumList[item.filelistShowName].push({
          uid: file.uid,
          name: response.data.name,
          url: response.data.url,
          uploadFile: response.data.url
        })
      } else {
        this.fileSumList[item.filelistShowName].push({
          uid: file.uid,
          name: response.data.name,
          url: fileImage,
          uploadFile: response.data.url
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  border: 1px solid #c0ccda;
  border-radius: 10px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
  height: auto !important;
}
::v-deep .el-upload--picture-card {
  position: absolute;
  right: -148px;
  top: 0;
}
::v-deep .el-upload-list--picture-card {
  display: flex !important;
}
::v-deep .el-dialog__header {
  border-bottom: none !important;
}
::v-deep .el-upload--picture-card {
  display: none !important;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-form-item {
  margin-bottom: 50px !important;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .obj_bt_box {
    width: 100%;
    display: flex;
    align-items: center;
    // .box_label {
    // }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
